<script setup lang='ts'>
import { ref, onMounted } from "vue"
import LoadingPage from "@/components/LoadingPage.vue"
import LoadingView from "@/components/LoadingView.vue"
import BookViewFirst from "@/components/BookViewFirst.vue"
import HumanHotPage from "@/components/HumanHotPage.vue"
import { getBookManInfo } from "@/api/index"
import { getBookChapterList } from "@/api/index"
import { useRouter } from 'vue-router'
import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
const $router = useRouter()
const isLoading = ref<boolean>(true)
const isLoadingView = ref<boolean>(false)

const bookManInfo = ref<any>()

onMounted(async () => {
    let res = await getBookManInfo($router.currentRoute.value.query.uuid);
    bookManInfo.value = res.data.data.list

    isLoading.value = false
})

const toBookContent = async (book: any) => {
    isLoadingView.value = true
    let bookChapterRes = await getBookChapterList(book.id)

    store.getChapter(bookChapterRes.data.data.catalog)
    isLoadingView.value = false
    $router.push({
        path: '/content', query: {
            source_uuid: bookChapterRes.data.data.book.sourceUuid, content_uuid: bookChapterRes.data.data.catalog[0].uuid, title: book.title, index: 0
        }
    })
}

const toShortCutNav = (str: string) => {
    if (str == '人气') {
        $router.push({ path: '/shortCut', query: { url: bookManInfo.value[4].more.url, type: '人气' } })
    } else if (str == '完结') {
        $router.push({ path: '/shortCut', query: { url: bookManInfo.value[6].more.url, type: '完结' } })
    }
}
</script>

<template>
    <div :style="{ height: '100%', width: '100%' }">
        <LoadingView v-if="isLoadingView" />
        <div class="man">
            <LoadingPage v-if="isLoading" />
            <div class="man-content" v-else>
                <div class="banner">
                    <van-swipe :autoplay="3000" lazy-render :indicator-color="'#fff'">
                        <van-swipe-item v-for="image in bookManInfo[0].banners" :key="image">
                            <img :src="image.cover" @click="toBookContent(image)" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="recommend">
                    <h3>{{ bookManInfo[1].name }}</h3>
                    <BookViewFirst v-for="book in bookManInfo[1].list" :key="book.id" :bookinfo="book"
                        @click="toBookContent(book)" />
                </div>
                <div class="hot-book">
                    <h3>{{ bookManInfo[2].name }}</h3>
                    <BookViewFirst v-for="book in bookManInfo[2].list" :key="book.id" :bookinfo="book"
                        @click="toBookContent(book)" />
                </div>
                <div class="reader-like">
                    <h3>{{ bookManInfo[3].name }}</h3>
                    <BookViewFirst v-for="book in bookManInfo[3].list" :key="book.id" :bookinfo="book"
                        @click="toBookContent(book)" />
                </div>
                <div class="human-hot">
                    <h3>{{ bookManInfo[4].name }}</h3>
                    <div class="humen-hot-list">
                        <HumanHotPage v-for="book, index in bookManInfo[4].list" :key="book.id" :bookinfo="book"
                            :index="index" @click="toBookContent(book)" />
                    </div>
                    <p @click="toShortCutNav('人气')">查看榜单 ></p>
                </div>
                <div class="public-praise">
                    <h3>{{ bookManInfo[5].name }}</h3>
                    <BookViewFirst v-for="book in bookManInfo[5].list" :key="book.id" :bookinfo="book"
                        @click="toBookContent(book)" />
                </div>
                <div class="human-finish-hot">
                    <h3>{{ bookManInfo[4].name }}</h3>
                    <div class="human-finish-hot-list">
                        <HumanHotPage v-for="book, index in bookManInfo[6].list" :key="book.id" :bookinfo="book"
                            :index="index" @click="toBookContent(book)" />
                    </div>
                    <p @click="toShortCutNav('完结')">查看榜单 ></p>
                </div>

                <div class="bottom">
                    <p>我是有底线的</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.man {
    width: 100%;
    height: 100%;

    >.man-content {
        .banner {
            // display: flex;
            width: 100%;
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        .recommend,
        .hot-book,
        .reader-like,
        .public-praise {
            margin-top: 25rem;
            border-bottom: 1px solid #eee;

            h3 {
                margin-bottom: 10rem;
            }
        }

        .human-hot,
        .human-finish-hot {
            margin-top: 25rem;
            border-bottom: 1px solid #eee;
            width: 100%;
            padding-bottom: 10rem;

            h3 {
                margin-bottom: 10rem;
            }

            .humen-hot-list,
            .human-finish-hot-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            >p {
                text-align: center;
                font-size: 14rem;
                color: #888;
            }
        }

        .bottom {
            padding: 15rem 0;

            p {
                text-align: center;
                // padding-bottom: 10rem;
                color: #999
            }
        }
    }
}
</style>
